
<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的游记</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/customer/customer_notes.css">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/home/index.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css" media="all">
    <style>
        .travel_list{
            width: 720px;
            height: 700px;
            /*background-color: #00F7DE;*/

        }
        .travel_list:hover{
            text-decoration: none;
            /*color: #38c4ff;*/
            cursor: pointer;
            /*background-color: #f5f3f3;*/
        }
        /*.travel_list ul{
            list-style: none;
            width: 100%;
            height: 100%;

        }*/
        /*.travel_list ul li{
            height: 230px;
            width: 100%;

        }*/
        .travel_list li{
            list-style: none;
            width: 100%;
            height: 250px;

        }
        .travel_tittle li:hover{
            cursor: pointer;

        }
        .travel_list li .travel_img{
            display: inline-block;
            width: 200px;
            height: 160px;
            margin-top: -2px;
            margin-left: 5px;
            float: left;

        }
        .travel_img img{
            width: 100%;
            height: 100%;
            display: inline-block;
        }
        .travel_list li .rightpart{
            display: inline-block;
            height: 200px;
            width: 350px;
            padding-left: 50px;


        }
        .rightpart .travel_tittle{
            width: 350px;
            height: 30px;
        }
        .rightpart .travel_tittle a{
            display: block;
            margin-left: 50px;
            line-height: 20px;
            width: 300px;
            height: 20px;
            font-size: 17px;
            overflow: hidden;
            font-weight: bold;
           /* background-color:yellow;*/

        }

        .travel_tittle:hover a{
            color: #38c4ff;
            cursor: pointer;


        }
        .travel_tittle>p{
            display: inline-block;
            color: #666;
            font-size: 16px;
            margin-top: 3px;
            margin-right: 50px;
            font-weight: bold;
        }
        .travel_tittle>a{
            text-decoration: none;
            line-height: 30px;
            color: #333;
            overflow: hidden;
            margin-left: 100px;
            font-size: 17px;
        }
        .travel_list li .travel_main{
            width: 100%;
            height: 100px;
            overflow: hidden;
        }
        .travel_main p{
            display: block;
            height: 100%;
            width: 100%;
            font-size: 14px;
            color: #666;
            overflow: hidden;

        }
        .travel_list li .delete_btn{
            height: 100%;
            width: 320px;
        }

        .travel_list li .delete_btn a{
            display: block;
            width: 30px;
            height: 30px;
            float: right;

        }
        .delete_btn a:hover{
            color: #38c4ff;
        }
        #page{
            margin-left:250px;
        }
    </style>
    <%--<script>
    var customer = '<%=request.getSession().getAttribute("loginCustomer")%>';
    console.log("++++++++++++++++++++++" + customer);
    let custId = '${loginCustomer.custId}';
    console.log("custId:" + custId);
    </script>--%>
</head>
<body>
<%--<c:import url="/header/header.jsp"/>--%>
<!--====================头部导航条==================================-->
<div class="topBarC">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/index.jsp" title="首页">首页</a>
    </div>

    <div class="t_nav">
        <ul class="t_nav_ul">
            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/index.jsp">首页</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/destination/destination_index.jsp">目的地</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">自友行</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">旅游定制</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">游记社区</a>
                </strong>
            </li>


        </ul>
    </div>

    <div class="t_search">
        <form method="get" name="search">
            <input type="text" class="key">
            <input type="submit" class="btn" value="">
        </form>
    </div>

</div>

<!--====================头部背景图===================================-->
<div class="container">
    <div class="banner">
        <div class="banner_img banner_extra"></div>
    </div>
</div>

<!--====================背景图底部个人中心列表============================-->
<div class="tags_bar second_tags_bar">
    <div class="center">
        <div class="Mavater">
            <div class="MAvaImg flt1">
                <img width="120px" height="120px" src="http://p1-q.mafengwo.net/s12/M00/35/6C/wKgED1uqIpCARLIhAAAZUeRPlFM676.png?imageMogr2%2Fthumbnail%2F%21120x120r%2Fgravity%2FCenter%2Fcrop%2F%21120x120%2Fquality%2F90"/>
            </div>
        </div>
        <ul class="flt2">

            <li>
                <a href="${pageContext.request.contextPath}/customer/customermain.jsp"  class="tags_link">我的沃</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/myorder/myorder_center.jsp"  class="tags_link">我的订单</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/customer/customer_notes.jsp"  class="tags_link">我的游记</a>
            </li>
            <li>
<%--                <a href="${pageContext.request.contextPath}/customer/customer_review.jsp"  class="tags_link">我的评价</a>--%>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/customer/customer_collection.jsp"  class="tags_link">我的收藏</a>
            </li>
        </ul>
    </div>


</div>

<!--=====================底部一级列表及对应的二级列表=====================-->
<div class="wrapper">
    <div class="home-extra">

        <div class="common_block my_notes">
            <div class="common_title clearfix">
                <div class="MAvaMore clearfix">
                    <div class="MAvaNums">
                        <strong class="travrltotal"></strong>
                        <p>游记</p>
                    </div>

                    <div class="MAvaNums">
                        <strong>0</strong>
                        <p>回复</p>
                    </div>

                    <div class="MAvaNums last">
                        <strong>0</strong>
                        <p>阅读</p>
                    </div>
                </div>
            </div>

            <div class="article_list" style="height: 800px;">
                <div class="notes_default_v2">
                    <div class="notes_dcon">
                        <div>
                            <ul class="travel_list">

                            </ul>

                        </div>
                        <div id="page" style="width: 323px;height: 35px;margin-top: 20px" ></div>
                    </div>
                    <a href="../notes/write_notes.jsp" title="写游记" class="btn_write">
                       <i></i>
                        写游记
                    </a>

                </div>

            </div>

        </div>
    </div>
</div>

<script>
    var currentPageNum;
    var customer = '<%=request.getSession().getAttribute("loginCustomer")%>';
    console.log("++++++++++++++++++++++" + customer);
    let custId = '${loginCustomer.custId}';
    console.log("custId:" + custId);
    //分页查询所有游记
    /*$(".tags_link").click(getAllByCustId);*/
    getByCustIdPage(1);
    function getByCustIdPage(pageNum){
        $(".travel_list").html("");
        //页码处理
        var url;
        var data={"custId":custId};
        if (typeof (pageNum)=="number"){
            url="${pageContext.request.contextPath}/travelnote/customer/customer_notes/"+custId+"/page/"+pageNum;
        }
        else {
            url="${pageContext.request.contextPath}/travelnote/customer/customer_notes/"+custId;
             pageNum=1;
        }
        currentPageNum=pageNum;

        $.get(url,
              data,
              function (result){
            console.log(result);
            //渲染游记详情数据
            var liEle ="";
            var travelNotesList=result.data.list;
            for (let i = 0; i <travelNotesList.length; i++) {
                liEle+=`<li>
                <div class="travel_img"><img src="`+travelNotesList[i].travelNotesMainImg+`"></div>
                <div class="rightpart">
                <div class="travel_tittle"><a href="${pageContext.request.contextPath}/travelnote/customer_notes/`+travelNotesList[i].travelNotesId+`">`+travelNotesList[i].travelNotesTitle+`</a></div>
                <div class="travel_main"><p>`+travelNotesList[i].travelNotesText+`<p></div>
                <div class="delete_btn"><a href="javascript:deleteTravelNote(`+travelNotesList[i].travelNotesId+`)">删除</a></div>
                </div>
                </li>`
                $(".travel_list").html(liEle)
            }
            //layui分页
                  layui.use('laypage', function(){
                      var laypage = layui.laypage;
                      //执行一个laypage实例
                      laypage.render({
                          elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                          ,count: result.data.total //数据总数，从服务端得到
                          ,theme: '#38c4ff'
                          ,limit: result.data.pageSize//每页显示
                          ,curr: result.data.pageNum
                          ,jump:function (obj,first){
                              if (!first){
                                  result.data.pageNum=obj.curr;
                                  getByCustIdPage(result.data.pageNum);
                              }
                          }
                      });
                  });

        },"json");

    }
    function deleteTravelNote(noteId){
        /*var url="${pageContext.request.contextPath}/customer/customer_notes/"+custId+"/delete/"+noteId;*/
        var url="${pageContext.request.contextPath}/travelnote/customer/customer_notes/"+noteId;
        $.ajax({
            url:url,
            type:'POST',
            data:"_method=delete",
            dataType: 'json',
            success(result){
                console.log("删除后的结果：" + JSON.stringify(result));
                getByCustIdPage(currentPageNum);

            }
        },"json");


    }
</script>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js" charset="utf-8"></script>
</body>
</html>